<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { isDark, toggleDark } from '../utils/dark'
import { useAuthStore } from '../stores/auth'
import IconExit from '../components/icons/IconExit.vue'
import { isSSORwork } from '../utils/config'
import UserAvatar from '../components/UserAvatar.vue'
import { homeLogoPath } from '../utils/config'
import { ChatSession } from '../utils/chat-session'
import { aiAgentStore } from '../stores/ai-agent'
import getAssetsFile from '../utils/pub-use'

const agentStore = aiAgentStore()
const authStore = useAuthStore()

const isLogin = ref(false)
const userInfo = ref({})

const darkMode = ref(isDark.value)

const logoName = ref<string>(homeLogoPath)
let chatSession: ChatSession

const toggleTheme = () => {
  // darkMode.value = !darkMode.value
  // connect()
  if (!chatSession) {
    chatSession = new ChatSession(agentStore.myAgents[0], '', true)
    // 监听 historyMessageList 的变化
    watch(
      () => chatSession?.historyMessageList,
      (newVal, oldVal) => {
        console.log('historyMessageList changed:', newVal?.value, oldVal?.value)
        // 在这里处理消息列表变化的逻辑
      },
      { deep: true }
    )

    // 监听 aicgSession.handleMessage 的变化
    watch(
      () => chatSession?.aicgSession?.handleMessage,
      (newVal, oldVal) => {
        console.log('aicgSession.handleMessage changed:', newVal, oldVal)
        // 在这里处理消息列表变化的逻辑
      },
      { deep: true }
    )

    // 监听 aicgSession.messageList 的变化
    watch(
      () => chatSession?.aicgSession?.messageList,
      (newVal, oldVal) => {
        console.log('aicgSession.messageList changed:', newVal?.value, oldVal?.value)
        // 在这里处理消息列表变化的逻辑
      },
      { deep: true }
    )
  }

  console.log('historyMessageList', chatSession.historyMessageList.value)

  chatSession.sendMessage('请写首古诗')
}

const logoutClick = () => {
  authMgr.logout()
}
import authMgr from '../utils/auth'

function connect() {
  // fetchEventGpt({}, () => {})
}

watch(
  () => darkMode.value,
  () => {
    toggleDark()
  }
)

onMounted(() => {
  // 监听 isLoggedIn 的变化
  isLogin.value = authStore.isLoggedIn.value
  userInfo.value = authStore.getUserInfo()
  console.log('isLogin:', isLogin.value)
  console.log('userName:', userInfo.value?.name)

  watch(authStore.isLoggedIn, (newVal, oldVal) => {
    // console.log(`登录状态改变: ${oldVal} -> ${newVal}`)
    isLogin.value = authStore.isLoggedIn.value
  })

  watch(authStore.userInfo, (newVal, oldVal) => {
    // console.log(`userInfo 改变: ${oldVal} -> ${newVal}`)
    userInfo.value = authStore.userInfo.value
  })
})
</script>

<template>
  <div class="navbar-wrapper">
    <div class="header-container">
      <div class="logo-container">
        <img class="logo" :src="getAssetsFile(logoName)" height="44" />
      </div>
      <div class="content">
        <div v-if="false" class="theme-toggler">
          <el-button :icon="darkMode ? Sunny : Moon" @click="toggleTheme()" circle />
        </div>
        <div class="theme-toggler">
          <!-- <el-button :icon="IconExit" circle /> -->
        </div>
        <div v-if="isLogin" class="use-avatar">
          <el-popover v-if="!isSSORwork" trigger="click" :show-arrow="false" width="">
            <template #reference>
              <user-avatar
                class="logo"
                :name="userInfo.name"
                :isCircle="true"
                :isSingleName="true"
                :avatarUrl="userInfo.avatarUrl"
              ></user-avatar>
            </template>
            <template #default>
              <div class="user-menu">
                <div @click="logoutClick()" class="menu-item">
                  <el-icon class="icon"><IconExit></IconExit></el-icon><span>退出登录</span>
                </div>
              </div>
            </template>
          </el-popover>
          <user-avatar
            v-else
            class="logo"
            :name="userInfo.name"
            :isCircle="true"
            :isSingleName="true"
            :avatarUrl="userInfo.avatarUrl"
          ></user-avatar>
        </div>
        <!-- <div v-else class="login-button">
          <el-button>登录</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.navbar-wrapper {
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;

  .header-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    height: var(--el-header-height);

    .logo-container {
      display: flex;
      height: 44px;
      padding-top: 10px;
    }

    .content {
      display: flex;
      flex: 1;
      width: 100%;
      justify-content: flex-end;
      align-items: center;
      background-color: transparent;

      .use-avatar {
        cursor: pointer;
        display: flex;
        margin-left: var(--crp-margin-base);

        .logo {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-color: #ccc;
        }
      }
      .theme-toggler {
        margin-left: var(--crp-margin-base);
        .el-button {
          font-size: 18px;
          background-color: var(--crp-bg-color-tag);
          border: 1px solid var(--crp-border-color-btn);
        }
      }

      .login-button {
        margin-left: var(--crp-margin-base);
        .el-button {
          // --el-fill-color-blank: var(--crp-bg-color-primary);
          --el-button-text-color: var(--crp-text-color-primary);
          background-color: var(--crp-bg-color-primary);
          border-color: var(--crp-border-color-btn);
        }
      }
    }
  }
}

.user-menu {
  width: auto;

  .menu-item {
    cursor: pointer;
    width: 134px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    &:hover {
      background: #f4f3ff;
    }

    .icon {
      width: 16px;
      height: 16px;
      margin-left: var(--crp-margin-base);
      margin-right: var(--crp-margin-small);
      color: var(--crp-icon-color-secondary);
    }

    span {
      font-weight: 400;
      font-size: var(--crp-font-size-base);
      color: var(--crp-text-color-important);
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
  }
}
</style>

<style lang="scss">
.el-popper {
  &.el-popover {
    --el-popover-padding: 8px;
  }
}
</style>
